<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myApp">
    <h3>v-route路由</h3>
    <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/news">新闻页</router-link>
        <router-link to="/product">产品页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/strings">使用strings模板</router-link>
        <router-link to="/xtemplate">使用xtemplate模板</router-link>
        <router-link to="/inline">使用inline模板</router-link>
        <router-link to="/template">使用template模板</router-link>
    </nav>
    <router-view></router-view>
    <!-- <my-Com></my-Com> -->
    <!-- <stringsfun></stringsfun> -->
    <!-- <my-Checkbox></my-Checkbox> -->
    <!-- <xtemplate></xtemplate> -->
    <script type="text/x-template" id="xtemplate">
        <div>666</div>
    </script>    
    <inline inline-template>
        <div>我是内联模板{{ title }}</div>
    </inline>
    <template id="myComponent">
        <div>This is a component!</div>
    </template>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>

<script type="text/javascript">
/*
定义组建模板的方式：
https://cn.vuejs.org/v2/guide/components.html#slots-demo
Vue.js 中，7种定义组件模板的方法 | Codementor
https://www.zcfy.cc/article/7-ways-to-define-a-component-template-in-vue-js-codementor-3644.html?t=new
https://www.cnblogs.com/avon/p/5943008.html
 */
/* 模板 */
var home = { template: '<p>这里是首页组件</p>' };
var news = { template: '<p>这里是新闻中心</p>' };
var product = { template: '<p>这里是产品页面</p>' };
var about = { template: '<p>这里是关于我们</p>' };
/* strings 模板 */
var stringsfun = Vue.component('stringsfun',{
    template:'<p @click="clickme">666666666{{ title }}6666</p>',
    data(){
        return {
            title:'333333'
        }
    },
    methods:{
        clickme(){
            alert();
        }
    }
});
/* x-template 模板 */
var xtemplate = Vue.component('xtemplate', {
    template: '#xtemplate',
    data(){
        return { checked: false, title: 'Check me' }
    },
    methods:{
        check() { this.checked = !this.checked; }
    }
});
/* 内联模板 组件添加 inline-template */
var inline = Vue.component('inline',{
    data(){
        return {
            title:'我是一个标题'
        }
    }
});
/*  */
var template = Vue.component('my-component',{
    template: '#myComponent'
})
// Vue.component('myCom', {template: '<h1>自定义组件!</h1>'});
/* 配置路由 */
var routes = [
    {path:'/news',component:news,title:'我是一个兵'},
    {path:'/product',component:product,title:'我是一个兵'},
    {path:'/about',component:about,title:'我是一个兵'},
    {path:'/strings',component:stringsfun,title:'我是一个兵'},
    {path:'/xtemplate',component:xtemplate,title:'我是一个兵'},
    {path:'/inline',component:inline,title:'我是一个兵'},
    {path:'/template',component:template,title:'我是一个兵'},
];
// 创建路由实例
var router = new VueRouter({
    routes:routes
});
var myApp = new Vue({
    el:"#myApp",
    router
});
</script>
</body>
</html>